@import url(base.less);
.flex {
  display: flex;
  justify-content: space-between;
}
.line-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
header {
  position: relative;
  height: (270 / @base_size);
  background: @base_main_color url(../images/home-banner.png) no-repeat
    (20 / @base_size) (45 / @base_size)/ (335 / @base_size) (208 / @base_size);
  .logo {
    position: absolute;
    top: (14 / @base_size);
    left: (14 / @base_size);
    width: (26 / @base_size);
    height: (26 / @base_size);
    text-indent: -9999px;
    background: url(../images/logo-x.png) no-repeat;
    background-size: 100%;
  }
  .signup {
    position: absolute;
    top: (14 / @base_size);
    right: (14 / @base_size);
    padding: (4 / @base_size) (12 / @base_size);
    font-size: (12 / @base_size);
    color: @base_main_color;
    border-radius: (13 / @base_size);
    background-color: @base_bg_color;
  }
  .header-bottom {
    position: absolute;
    left: (14 / @base_size);
    bottom: (8 / @base_size);
    form {
      width: (308 / @base_size);
      height: (37 / @base_size);
      line-height: (37 / @base_size);
      padding: 0 (14 / @base_size);
      margin-right: (14 / @base_size);
      border-radius: (30 / @base_size);
      background-color: @base_bg_color;
      overflow: hidden;
      span {
        width: (40 / @base_size);
        position: relative;
        color: #414a60;
        cursor: pointer;
        &::after {
          content: '';
          position: absolute;
          height: (18 / @base_size);
          right: (-10 / @base_size);
          top: (10 / @base_size);
          border-right: (1 / @base_size) solid rgba(242, 245, 250, 1);
        }
        i {
          position: absolute;
          right: (1 / @base_size);
          top: (14 / @base_size);
          width: 0;
          height: 0;
          border-right: (4 / @base_size) solid transparent;
          border-left: (4 / @base_size) solid transparent;
          border-top: (4 / @base_size) solid #000;
        }
      }
      input {
        flex: 1;
        padding-left: (24 / @base_size);
        font-size: (14 / @base_size);
        color: #aeaeae;
        &::placeholder {
          font-size: (14 / @base_size);
          color: #aeaeae;
        }
      }
      button {
        width: (40 / @base_size);
        padding: 0;
        font-size: (14 / @base_size);
        color: @base_main_color;
      }
    }
    .message {
      flex-direction: column;
      i {
        position: relative;
        height: (23 / @base_size);
        background: url(../images/message.png) no-repeat;
        background-size: 100%;
        &::after {
          content: '';
          position: absolute;
          right: (-2 / @base_size);
          top: (-1 / @base_size);
          width: (6 / @base_size);
          height: (6 / @base_size);
          border-radius: (6 / @base_size);
          background-color: #fd896b;
        }
      }
      span {
        color: #fff;
        font-size: (12 / @base_size);
      }
    }
  }
}

main {
  .main_common {
    padding: (28 / @base_size) (20 / @base_size) 0;
    h3 {
      margin-bottom: (16 / @base_size);
      font-size: (20 / @base_size);
      color: #333;
    }
  }
  .hot-position {
    ul {
      flex-wrap: wrap;
      font-size: (14 / @base_size);
      li {
        text-align: center;
        margin-bottom: (9 / @base_size);
        &:nth-last-child(-n + 4) {
          margin-bottom: 0;
        }
        a {
          display: block;
          box-sizing: border-box;
          width: (105 / @base_size);
          height: (36 / @base_size);
          padding: (7 / @base_size) (10 / @base_size);
          color: #333;
          border: (1 / @base_size) solid #e3e3e3;
          border-radius: (3 / @base_size);
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
      span {
        width: (105 / @base_size);
      }
    }
  }
  .hot-company {
    padding-right: 0;
    padding-left: 0;
    width: 100vw;
    overflow: hidden;
    h3 {
      padding-left: (20 / @base_size);
    }
    ul {
      width: (690 / @base_size);
      padding: 0 (20 / @base_size);
      flex-wrap: wrap;
      span {
        width: (155 / @base_size);
      }
      li {
        margin-bottom: (10 / @base_size);
        &:nth-last-child(-n + 7) {
          margin-bottom: 0;
        }
        a {
          align-items: center;
          justify-content: center;
          width: (155 / @base_size);
          height: (66 / @base_size);
          color: #414a60;
          background-color: #f9f9f9;
          border-radius: (8 / @base_size);
          img {
            width: (36 / @base_size);
            margin-right: (8 / @base_size);
          }
          .hot-company-info {
            width: (85 / @base_size) px;
            height: (42 / @base_size) px;
            p {
              color: #333;
            }
            span {
              font-size: (12 / @base_size);
              color: #666;
            }
          }
        }
      }
    }
  }
  .job-recommend {
    .login {
      position: relative;
      &::before {
        content: '';
        position: absolute;
        left: (33 / @base_size);
        top: (-4 / @base_size);
        width: (8 / @base_size);
        height: (8 / @base_size);
        background-color: @base_bg_color;
        box-shadow: (1 / @base_size) (-1 / @base_size) (2 / @base_size)
          rgb(104 75 75 / 7%);
        transform: rotate(-45deg);
      }
      align-items: center;
      padding: (10 / @base_size) (15 / @base_size);
      font-size: (13 / @base_size);
      color: #666;
      box-shadow: 0 (1 / @base_size) (4 / @base_size) 0 rgb(0 0 0 / 8%);
      background-color: @base_bg_color;
      span {
        padding: (4 / @base_size) (12 / @base_size);
        font-size: (12 / @base_size);
        border-radius: (14 / @base_size);
        color: @base_bg_color;
        background-color: @base_main_color;
      }
    }
    .job-list {
      margin: 0 (-20 / @base_size);
      background-color: #f7f7f7;
      .job-list-item {
        margin-bottom: (6 / @base_size);
        background-color: @base_bg_color;
        box-sizing: border-box;
        display: block;
        padding: (18 / @base_size) (20 / @base_size) (10 / @base_size);
        color: #333;
        .title {
          align-items: center;
          margin-bottom: (5 / @base_size);
          font-size: (18 / @base_size);
          h4 {
            font-weight: normal;
          }
          span {
            font-size: (16 / @base_size);
            font-family: kanzhun-Regular, kanzhun;
            color: #f67b4e;
          }
        }
        .name {
          margin-bottom: (11 / @base_size);
          color: #666;
          span {
            margin-right: (5 / @base_size);
          }
        }
        .labels {
          margin-bottom: (20 / @base_size);
          font-size: (12 / @base_size);
          span {
            padding: (6 / @base_size) (6 / @base_size);
            color: #666;
            background-color: #f5f5f5;
            border-radius: (3 / @base_size);
          }
        }
        .recruiter {
          align-items: center;
          p {
            font-size: (12 / @base_size);
            img {
              width: (24 / @base_size);
              height: (24 / @base_size);
              margin-right: (3 / @base_size);
              border-radius: 50%;
            }
          }
          span {
            padding: (5 / @base_size) (22 / @base_size);
            font-size: (13 / @base_size);
            border-radius: (18 / @base_size);
            color: @base_bg_color;
            background-color: @base_main_color;
          }
        }
      }
      .loadmore {
        cursor: pointer;
        margin-top: (-6 / @base_size);
        line-height: (50 / @base_size);
        text-align: center;
        font-size: (14 / @base_size);
        color: @base_main_color;
        background-color: @base_bg_color;
      }
    }
  }
}
footer {
  padding: (5 / @base_size) (15 / @base_size);
  font-size: (12 / @base_size);
}
